<?php
$form = $this->form;
$data = $this->data;
$items = $this->items;
$publicPath = $this->publicPath;
?>
<div>
<table width="100%" style="height:480px;">
<tr>
<td width="50%" style="vertical-align:top;">
<h3 style="padding:10px 0px 10px 10px; margin:0px; color:#428bca; margin-bottom:20px;border-bottom:3px solid #4cae4c">Tạo hóa đơn</h3>

<?php
	$form->prepare();
	$form->setAttribute('action',$this->url(NULL,array('controller'=>'bill','action'=>'upload')));
	$form->setAttribute('method','post');
	$form->setAttribute('class','form-horizontal');
	$form->setAttribute('role','form');
	echo $this->form()->openTag($form);
?>
	<div class="form-group">
		<?php echo $this->formLabel($form->get('maHang'));?>
		<?php
		echo '<div class="col-sm-4">';
		echo $this->formElement($form->get('maHang'));
		echo $this->formElementErrors($form->get('maHang'));
		echo '</div>';
		?>
	</div>

	<div class="form-group">
		<?php echo $this->formLabel($form->get('idUser')); ?>
		<?php
		echo '<div class="col-sm-4">';
		echo $this->formElement($form->get('idUser'));
		echo $this->formElementErrors($form->get('idUser'));
		echo '</div>';
		?>
	</div>

	<div class="form-group">
		<?php echo $this->formLabel($form->get('soLuong')); ?>
		<?php
		echo '<div class="col-sm-4">';
		echo $this->formElement($form->get('soLuong'));
		echo $this->formElementErrors($form->get('soLuong'));
		echo '</div>';
		?>
	</div>

	<div class="form-group">
		<?php echo $this->formLabel($form->get('gia')); ?>
		<?php
		echo '<div class="col-sm-4">';
		echo $this->formElement($form->get('gia'));
		echo $this->formElementErrors($form->get('gia'));
		echo '</div>';
		?>
	</div>

	<div class="form-group">
		<?php echo $this->formLabel($form->get('ngay')); ?>
		<?php
		echo '<div class="col-sm-4">';
		echo $this->formElement($form->get('ngay'));
		echo $this->formElementErrors($form->get('ngay'));
		echo '</div>';
		?>
	</div>

	<div class="form-group">
		<label for="submit" class='col-sm-4 control-label'> </label>
		<div class="col-sm-4">
		<?php echo $this->formElement($form->get('submit'));?>
		</div>
	</div>
<?php
	echo $this->form()->closeTag($form);
?>
</td>
<td width="50%" style="border-left:1px solid #ddd; padding:0px; vertical-align:top; position:relative;">
	<span>
		<h3 style="padding:10px 0px 10px 10px; margin:0px; color:#428bca; border-bottom:3px solid #4cae4c">Sản phẩm</h3>
		<input type="text" id="filter" style="margin-left: 10px; width:200px; position:absolute; right:10px; top:5px;" class="form-control" placeholder="Tìm theo mã"/>
	</span>
	<?php
		echo '<ul class="myList">';
		foreach ($items as $item) {
			$tempAnh = explode('|', $item['hinhAnh']);
			$tempAnh = $tempAnh[0];
			$value = $item['maHang'].'|'.$item['gia'].'|'.$item['soLuong'];
			$imgLink = '/files/'.$item['loaiHang'].'/'.$item['maHang'].'/'.$tempAnh;
			echo '<li onclick="getInform(this);" value='.$value.'>';
			echo "Mã hàng: ".$item['maHang'];
			echo '<br/>';
			echo "Giá: ".$item['gia'];
			echo '<br/>';
			echo "Có sẵn: ".$item['soLuong'];
			echo "<img src='$imgLink'>";
			echo '</li>';
		}
		echo '</ul>';
	?>

</td>
</tr>
</table>
</div>

<style>
.myList{
	max-height: 400px;
	overflow: auto;
	padding:0px;
	list-style: none;
}
.myList li{
	padding: 10px;
	height: 80px;
	vertical-align: middle !important;
	border-bottom: 1px solid #eee;
	position: relative;
}

.myList li > img{
	position: absolute;
	right: 0px;
	top: 0px;
	max-height: 100%;
	width: auto;
}

.myList li:hover{
	background-color: #EBEBEB;
	cursor: pointer;
}
.myList::-webkit-scrollbar {
    display: none;
}
</style>
<script>
var availableItems = 0;
$('#soLuong').focusout(function(){
	var temp = $('#soLuong').val();
	temp = parseInt(temp);
	if(temp > availableItems){
		alert("Số lượng sản phẩm còn trong kho không đủ để bán. \n Số lượng còn lại: " + availableItems + "\n Số lượng cần bán: " + temp);
		$('#soLuong').val('');
	}
})

function getInform(li){
	var $tag = $(li);
	var value = $tag.attr('value');
	var str = value.split('|');
	availableItems = parseInt(str[2]);
	$('#maHang').val(str[0]);
	$('#donGia').val(str[1]);
	$('#soLuong').attr('placeholder','Tối đa: ' + str[2]);
}
</script>